<template>
  <section>
    <div class="title-control">
      <div class="left">
        <el-page-header v-if="hasBack && canBack"
                        @back="goBack"> </el-page-header>
        <i v-if="!hasBack || !canBack"
           class="el-icon-guide"></i>{{title}}
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'ym-title-control',
  props: {
    title: {
      type: String,
      default: ""
    },
    hasBack: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    canBack () {
      return window.history.length > 1
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/color.scss';
.title-control {
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    font-weight: bold;
    i {
      margin-right: 6px;
      font-size: 20px;
    }
    // &::before {
    //   content: '';
    //   width: 6px;
    //   height: 6px;
    //   background: $color_primary;
    //   display: inline-block;
    //   margin-right: 10px;
    //   border-radius: 50%;
    // }
  }
}
</style>
